<template>
  <div class="space-y-4">
    <!-- 模型选择 -->
    <div>
      <h4 class="text-base font-semibold text-gray-900 mb-3">模型选择</h4>
      <div class="grid grid-cols-2 gap-2">
        <div 
          v-for="model in availableModels" 
          :key="model.id"
          class="p-2 border rounded-lg cursor-pointer transition-all duration-200 hover:shadow-sm"
          :class="{ 
            'border-blue-500 bg-blue-50': selectedModel === model.id,
            'border-gray-200 hover:border-gray-300': selectedModel !== model.id
          }"
          @click="$emit('update:selectedModel', model.id)"
        >
          <div class="text-center">
            <div class="text-lg mb-1">{{ model.icon }}</div>
            <h5 class="font-medium text-gray-900 text-xs">{{ model.name }}</h5>
            <div class="text-xs text-gray-500 mt-1">
              <div>{{ model.accuracy }}%</div>
              <div>{{ model.speed }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 基础参数 -->
    <div>
      <h4 class="text-base font-semibold text-gray-900 mb-3">基础参数</h4>
      <div class="space-y-3">
        <div>
          <label class="block text-xs font-medium text-gray-700 mb-1">
            置信度: {{ (parameters.confidenceThreshold * 100).toFixed(0) }}%
          </label>
          <input 
            type="range" 
            min="0.1" 
            max="0.9" 
            step="0.05" 
            :value="parameters.confidenceThreshold"
            @input="$emit('update:parameters', { ...parameters, confidenceThreshold: parseFloat($event.target.value) })"
            class="w-full h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer slider"
          />
        </div>
        
        <div>
          <label class="block text-xs font-medium text-gray-700 mb-1">
            NMS: {{ (parameters.nmsThreshold * 100).toFixed(0) }}%
          </label>
          <input 
            type="range" 
            min="0.1" 
            max="0.9" 
            step="0.05" 
            :value="parameters.nmsThreshold"
            @input="$emit('update:parameters', { ...parameters, nmsThreshold: parseFloat($event.target.value) })"
            class="w-full h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer slider"
          />
        </div>
        
        <div class="grid grid-cols-2 gap-2">
          <div>
            <label class="block text-xs font-medium text-gray-700 mb-1">输入尺寸</label>
            <select 
              :value="parameters.inputSize"
              @change="$emit('update:parameters', { ...parameters, inputSize: $event.target.value })"
              class="w-full px-2 py-1 border border-gray-300 rounded text-xs focus:ring-1 focus:ring-blue-500 focus:border-transparent"
            >
              <option value="416">416</option>
              <option value="608">608</option>
              <option value="832">832</option>
            </select>
          </div>
          
          <div>
            <label class="block text-xs font-medium text-gray-700 mb-1">批处理</label>
            <select 
              :value="parameters.batchSize"
              @change="$emit('update:parameters', { ...parameters, batchSize: $event.target.value })"
              class="w-full px-2 py-1 border border-gray-300 rounded text-xs focus:ring-1 focus:ring-blue-500 focus:border-transparent"
            >
              <option value="1">1</option>
              <option value="4">4</option>
              <option value="8">8</option>
            </select>
          </div>
        </div>
      </div>
    </div>

    <!-- 高级设置 -->
    <div>
      <h4 class="text-base font-semibold text-gray-900 mb-3">高级设置</h4>
      <div class="space-y-2">
        <div class="flex items-center space-x-2">
          <input 
            type="checkbox" 
            :checked="parameters.enableGPU"
            @change="$emit('update:parameters', { ...parameters, enableGPU: $event.target.checked })"
            class="w-3.5 h-3.5 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
          />
          <label class="text-xs font-medium text-gray-700">GPU加速</label>
        </div>
        
        <div class="flex items-center space-x-2">
          <input 
            type="checkbox" 
            :checked="parameters.enablePreprocessing"
            @change="$emit('update:parameters', { ...parameters, enablePreprocessing: $event.target.checked })"
            class="w-3.5 h-3.5 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
          />
          <label class="text-xs font-medium text-gray-700">图像预处理</label>
        </div>
        
        <div class="flex items-center space-x-2">
          <input 
            type="checkbox" 
            :checked="parameters.enablePostprocessing"
            @change="$emit('update:parameters', { ...parameters, enablePostprocessing: $event.target.checked })"
            class="w-3.5 h-3.5 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
          />
          <label class="text-xs font-medium text-gray-700">结果后处理</label>
        </div>
      </div>
    </div>

    <!-- 性能预览 -->
    <div>
      <h4 class="text-base font-semibold text-gray-900 mb-3">性能预览</h4>
      <div class="grid grid-cols-3 gap-2">
        <div class="text-center p-2 bg-gradient-to-r from-blue-50 to-blue-100 rounded">
          <div class="text-sm font-bold text-blue-600">{{ estimatedTime }}ms</div>
          <div class="text-xs text-gray-600">时间</div>
        </div>
        <div class="text-center p-2 bg-gradient-to-r from-green-50 to-green-100 rounded">
          <div class="text-sm font-bold text-green-600">{{ memoryUsage }}MB</div>
          <div class="text-xs text-gray-600">内存</div>
        </div>
        <div class="text-center p-2 bg-gradient-to-r from-purple-50 to-purple-100 rounded">
          <div class="text-sm font-bold text-purple-600">{{ selectedModelInfo.size }}</div>
          <div class="text-xs text-gray-600">大小</div>
        </div>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="grid grid-cols-3 gap-2">
      <button @click="$emit('reset')" class="btn btn-secondary text-xs py-1.5 px-2">
        <svg class="w-3 h-3 mr-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
        </svg>
        <span>重置</span>
      </button>
      <button @click="$emit('save')" class="btn btn-primary text-xs py-1.5 px-2">
        <svg class="w-3 h-3 mr-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
        </svg>
        <span>保存</span>
      </button>
      <button @click="$emit('test')" class="btn btn-success text-xs py-1.5 px-2">
        <svg class="w-3 h-3 mr-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
        </svg>
        <span>测试</span>
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ModelSettingsContent',
  props: {
    selectedModel: {
      type: String,
      required: true
    },
    parameters: {
      type: Object,
      required: true
    },
    availableModels: {
      type: Array,
      required: true
    }
  },
  emits: ['update:selectedModel', 'update:parameters', 'reset', 'save', 'test'],
  computed: {
    selectedModelInfo() {
      return this.availableModels.find(model => model.id === this.selectedModel)
    },
    estimatedTime() {
      const baseTime = this.selectedModelInfo.speed === '极快' ? 50 : 
                      this.selectedModelInfo.speed === '很快' ? 100 :
                      this.selectedModelInfo.speed === '快' ? 200 : 500
      
      const sizeMultiplier = this.parameters.inputSize === '416' ? 0.7 :
                            this.parameters.inputSize === '608' ? 1.0 : 1.5
      
      const gpuMultiplier = this.parameters.enableGPU ? 0.3 : 1.0
      
      return Math.round(baseTime * sizeMultiplier * gpuMultiplier)
    },
    memoryUsage() {
      const baseMemory = this.selectedModelInfo.size === '2.8MB' ? 512 :
                        this.selectedModelInfo.size === '4.1MB' ? 768 :
                        this.selectedModelInfo.size === '6.2MB' ? 1024 : 2048
      
      const batchMultiplier = parseInt(this.parameters.batchSize)
      const sizeMultiplier = this.parameters.inputSize === '416' ? 0.7 :
                            this.parameters.inputSize === '608' ? 1.0 : 1.5
      
      return Math.round(baseMemory * batchMultiplier * sizeMultiplier)
    }
  }
}
</script>

<style scoped>
.slider {
  -webkit-appearance: none;
  appearance: none;
  background: #e5e7eb;
  outline: none;
  border-radius: 9999px;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #3b82f6;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #3b82f6;
  cursor: pointer;
  border: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
</style>
